import React, { useState } from "react";
import logo from "../../../assets/images/login_hand_03.png";
import { Form, Input, Button, Toast } from "antd-mobile";
import http from "../../../http";
import {
  MailOutline,
  LockOutline,
  CheckShieldOutline,
  EyeInvisibleOutline,
  EyeOutline,
  UserCircleOutline,
} from "antd-mobile-icons";
import styles from "./sigin.scss";
import { encryptedData } from "../../../utils/pwdLock";
import { useNavigate } from "react-router-dom";

interface RegistRawState {
  email: string;
  code: string;
  pwd1: string;
  pwd2: string;
  invitationCode?: string;
}

export default function Sigin() {
  // 密码是否隐藏的变量
  const [form] = Form.useForm();
  const [visiblepsw1, setVisiblepsw1] = useState(false);
  const [visiblepsw2, setVisiblepsw2] = useState(false);
  const emailreg =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  // 跳转
  const navigete=useNavigate()
  // 提交表单
  const onFinish = (data: RegistRawState) => {
    data.pwd1 = encryptedData(data.pwd1) as string;
    data.pwd2 = data.pwd1;
    // 注册接口
    http
      .post("/health/user/v1/register", data, {
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      })
      .then((res: any) => {
        if (res.status != '0000') {
          Toast.show({
            icon: "fail",
            content: res.message,
          });
        } else {
          Toast.show({
            icon: "success",
            content: res.message,
          });
          navigete("/user/login")
        }
      });
  };
  // 确认密码(自定义校验)
  const confirmPassword = async (_: any, value: string) => {
    if (value && value != form.getFieldValue("pwd1")) {
      return Promise.reject(new Error("两次密码输入不一致"));
    }
  };
  const getCode = () => {
    const email=form.getFieldValue("email")
    if (emailreg.test(email)) {
      http
        .post("/health/user/v1/sendOutEmailCode", {email}, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
        })
        .then((res: any) => {
          if (res.status != '0000') {
          Toast.show({
            icon: "fail",
            content: res.message,
          });
        } else {
          Toast.show({
            icon: "success",
            content: res.message,
          });
        }
        });
    }
  };
  return (
    <div className="Login">
      {/* logo标识 */}
      <img src={logo} alt="" className="logo" />
      {/* 登录表单 */}
      <div className="centerbox">
        <Form
          layout="horizontal"
          // 数据绑定
          form={form}
          // 提交事件
          onFinish={onFinish}
          // 足部提交按钮
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          {/* 邮箱 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <MailOutline
              style={{
                fontSize: 28,
                color: "gray",
                marginLeft: "20px",
              }}
            />
            <Form.Item
              name="email"
              style={{ width: "90%" }}
              // 正则校验
              rules={[
                { required: true, message: "邮箱不能为空" },
                {
                  pattern: emailreg,
                  message: "请输入正确邮箱",
                },
              ]}
              // 验证码发送按钮
              extra={
                <Button
                  color="primary"
                  style={{
                    fontSize: 14,
                  }}
                  onClick={() => getCode()}
                >
                  发送验证码
                </Button>
              }
            >
              <Input placeholder="请输入邮箱" style={{ width: "100%" }} />
            </Form.Item>
          </div>
          {/* 验证码 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <CheckShieldOutline
              style={{
                fontSize: 28,
                color: "gray",
                marginLeft: "20px",
              }}
            />
            <Form.Item
              name="code"
              style={{ width: "90%" }}
              // 正则校验
              rules={[{ required: true, message: "验证码不能为空" }]}
            >
              <Input
                placeholder="请输入验证码"
                style={{ width: "100%" }}
                autoComplete="off"
              />
            </Form.Item>
          </div>
          {/* 密码 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginLeft: "20px",
            }}
          >
            <LockOutline
              style={{
                fontSize: 28,
                color: "gray",
              }}
            />
            <Form.Item
              name="pwd1"
              style={{ width: "90%" }}
              // 正则校验
              rules={[{ required: true, message: "密码不能为空" }]}
              extra={
                <div className={styles.eye}>
                  {/* 判断小眼睛 是否睁眼闭眼 */}
                  {!visiblepsw1 ? (
                    <EyeInvisibleOutline
                      onClick={() => setVisiblepsw1(true)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  ) : (
                    <EyeOutline
                      onClick={() => setVisiblepsw1(false)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  )}
                </div>
              }
            >
              <Input
                placeholder="请输入密码"
                clearable
                autoComplete="new-password"
                // 转换隐藏
                type={visiblepsw1 ? "text" : "password"}
              />
            </Form.Item>
          </div>
          {/* 确认密码 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginLeft: "20px",
            }}
          >
            <LockOutline
              style={{
                fontSize: 28,
                color: "gray",
              }}
            />
            <Form.Item
              name="pwd2"
              style={{ width: "90%" }}
              // 正则校验
              rules={[
                { required: true, message: "请再次输入您输入的密码" },
                { validator: confirmPassword },
              ]}
              extra={
                <div className={styles.eye}>
                  {/* 判断小眼睛 是否睁眼闭眼 */}
                  {!visiblepsw2 ? (
                    <EyeInvisibleOutline
                      onClick={() => setVisiblepsw2(true)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  ) : (
                    <EyeOutline
                      onClick={() => setVisiblepsw2(false)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  )}
                </div>
              }
            >
              <Input
                placeholder="请再次输入密码"
                clearable
                autoComplete="new-password"
                // 转换隐藏
                type={visiblepsw2 ? "text" : "password"}
              />
            </Form.Item>
          </div>
          {/* 邀请码（选填） */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <UserCircleOutline
              style={{
                fontSize: 28,
                color: "gray",
                marginLeft: "20px",
              }}
            />
            <Form.Item
              name="invitecode"
              style={{ width: "90%" }}
              extra={<span>选填</span>}
            >
              <Input placeholder="请输入邀请码" style={{ width: "100%" }} />
            </Form.Item>
          </div>
        </Form>
        {/* 渲染阴影 */}
        <div className="loginshadow">
          <div className="loginshadow"></div>
        </div>
      </div>
    </div>
  );
}
